<script setup lang="ts">
import { reactive, watch } from "vue";
import JxudpStationTreeDialog from "./jxudp-station-tree-dialog.vue";

interface IStationSelectInputProps {
  stationId?: string;
  stationName?: string;
}
const emit = defineEmits<{
  (e: "update:stationId", val: string): void;
  (e: "update:stationName", val: string): void;
}>();

const props = withDefaults(defineProps<IStationSelectInputProps>(), {
  stationId: "",
  stationName: ""
});

console.log(props);

const JxtechSelectInputState = reactive({
  onSelectClick() {
    JxudpStationTreeDialogState.openDialog();
  },
  onClearClick() {
    JxudpStationTreeDialogState.stationId = "";
    JxudpStationTreeDialogState.stationName = "";
  }
});

const JxudpStationTreeDialogState = reactive({
  visible: false,
  stationId: props.stationId,
  stationName: props.stationName,
  openDialog: () => (JxudpStationTreeDialogState.visible = true)
});

watch(
  () => props.stationId,
  val => {
    JxudpStationTreeDialogState.stationId = val;
  }
);
watch(
  () => JxudpStationTreeDialogState.stationId,
  val => {
    emit("update:stationId", val);
  }
);

watch(
  () => props.stationName,
  val => {
    JxudpStationTreeDialogState.stationName = val;
  }
);
watch(
  () => JxudpStationTreeDialogState.stationName,
  val => {
    emit("update:stationName", val);
  }
);
</script>
<template>
  <JxtechSelectInput
    v-model:input-label="JxudpStationTreeDialogState.stationName"
    v-model:input-value="JxudpStationTreeDialogState.stationId"
    @select-click="JxtechSelectInputState.onSelectClick"
    @clear-click="JxtechSelectInputState.onSelectClick"
  ></JxtechSelectInput>
  <JxudpStationTreeDialog
    v-if="JxudpStationTreeDialogState.visible"
    v-model:visible="JxudpStationTreeDialogState.visible"
    v-model:station-id="JxudpStationTreeDialogState.stationId"
    v-model:station-name="JxudpStationTreeDialogState.stationName"
  ></JxudpStationTreeDialog>
</template>
<style scoped lang="scss"></style>
